<template>
  <view class="container">
    <view class="login-header">
      <image class="logo" src="/static/logo.png"></image>
      <text class="title">充电桩服务平台</text>
    </view>
    
    <view class="login-form">
      <view class="form-item">
        <input class="form-input" placeholder="请输入手机号" v-model="formData.phone" />
      </view>
      <view class="form-item">
        <input class="form-input" placeholder="请输入验证码" v-model="formData.code" />
        <button class="code-btn" :disabled="isSendingCode" @click="sendCode">
          {{ isSendingCode ? `${countdown}秒后重发` : '获取验证码' }}
        </button>
      </view>
      
      <button class="login-btn" @click="handleLogin">登录</button>
      
      <view class="agreement">
        <label>
          <checkbox :checked="agreeChecked" @click="toggleAgree" />
          <text class="agreement-text">我已阅读并同意</text>
          <text class="agreement-link" @click="showAgreement">《用户协议》</text>
          <text class="agreement-text">和</text>
          <text class="agreement-link" @click="showPrivacy">《隐私政策》</text>
        </label>
      </view>
    </view>
  </view>
</template>

<script>
import api from '../../api/index.js'
import store from '../../store/index.js'

export default {
  data() {
    return {
      formData: {
        phone: '',
        code: ''
      },
      agreeChecked: false,
      isSendingCode: false,
      countdown: 60
    }
  },
  methods: {
    // 发送验证码
    sendCode() {
      if (!this.formData.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      // 验证手机号格式
      if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        })
        return
      }
      
      // 模拟发送验证码
      this.isSendingCode = true
      const timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(timer)
          this.isSendingCode = false
          this.countdown = 60
        }
      }, 1000)
      
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      })
    },
    
    // 登录
    async handleLogin() {
      if (!this.agreeChecked) {
        uni.showToast({
          title: '请先同意用户协议',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.phone || !this.formData.code) {
        uni.showToast({
          title: '请输入手机号和验证码',
          icon: 'none'
        })
        return
      }
      
      try {
        const res = await api.user.login(this.formData)
        if (res.code === 200) {
          // 保存token到store
          store.commit('SET_USER_INFO', { token: res.data.token })
          
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })
          
          // 跳转到首页
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }, 1000)
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '登录失败',
          icon: 'none'
        })
        console.error('登录失败:', error)
      }
    },
    
    // 切换同意协议
    toggleAgree() {
      this.agreeChecked = !this.agreeChecked
    },
    
    // 显示用户协议
    showAgreement() {
      uni.showToast({
        title: '用户协议',
        icon: 'none'
      })
    },
    
    // 显示隐私政策
    showPrivacy() {
      uni.showToast({
        title: '隐私政策',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 0 40rpx;
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 150rpx;
  margin-bottom: 100rpx;
}

.logo {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 30rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.form-item {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #eee;
  padding: 20rpx 0;
  margin-bottom: 40rpx;
}

.form-input {
  flex: 1;
  font-size: 30rpx;
}

.code-btn {
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
}

.code-btn[disabled] {
  background-color: #ccc;
}

.login-btn {
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 32rpx;
  margin-top: 50rpx;
}

.agreement {
  margin-top: 50rpx;
  text-align: center;
}

.agreement-text {
  font-size: 24rpx;
  color: #999;
}

.agreement-link {
  font-size: 24rpx;
  color: #007aff;
}
</style>